<template>
  <div>
    <div class="tick">
      <div class="box">
        <div class="title">工单统计
          <span>{{ $store.getters.start.substring(0,10) }} ~ {{ $store.getters.end.substring(0,10) }}</span>
        </div>
        <div class="list">
          <div class="stats">
            <h1>{{ $store.getters.Stats.total }}</h1>
            <span>工单总数(个)</span>
          </div>
          <div class="stats">
            <h1>{{ $store.getters.Stats.workCount }}</h1>
            <span>完成工单(个)</span>
          </div>
          <div class="stats">
            <h1>{{ $store.getters.Stats.progressTotal }}</h1>
            <span>进行工单(个)</span>
          </div>
          <div class="stats">
            <h1>{{ $store.getters.Stats.cancelCount }}</h1>
            <span>取消工单(个)</span>
          </div>
        </div>
      </div>
      <div class="box1">
        <div class="title">销售统计
          <span>{{ $store.getters.start.substring(0,10) }} ~ {{ $store.getters.end.substring(0,10) }}</span>
        </div>
        <div class="list">
          <div class="stats">
            <h1>{{ $store.getters.order }}</h1>
            <span>订单量（个）</span>
          </div>
          <div class="stats">
            <h1>{{ $store.getters.income }}</h1>
            <span>销售额（万元）</span>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts">
      <div class="text">
        <div class="title">销售数据
          <span>{{ this.$store.getters.start.substring(0, 8) + '24' }} ~ {{ $store.getters.end.substring(0,10) }}</span>
        </div>
        <div class="time">
          <div :class="`${item === 1 ? 'is-checked': ''}`" @click="weekFn">周</div>
          <div :class="`${item === 2 ? 'is-checked': ''}`" @click="monthFn">月</div>
          <div :class="`${item === 3 ? 'is-checked': ''}`" @click="yearFn">年</div>
        </div>
      </div>
      <el-row>
        <el-col :span="12"><div id="left" /></el-col>
        <el-col :span="12"><div id="right" /></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      item: 1
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    getLeft() {
      const chartDom = document.getElementById('left')
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          // 标题
          text: '销售额趋势图',
          // 居中
          left: 'center',
          // 字体
          textStyle: {
            fontSize: 14
          }
        },
        // 提示框组件
        tooltip: {
          // 坐标轴触发
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            // 线条样式
            lineStyle: {
              // 颜色
              color: '#d9d9d9',
              // 宽度
              width: '2',
              // 实线
              type: 'solid'
            }
          },
          // 自定义提示文本
          formatter: function(data) {
            return '销售额：' + data[0].value + '<br/>' + data[0].name
          }
        },
        // 直角坐标系 grid 中的 x 轴
        xAxis: {
          // 类目轴
          type: 'category',
          // x 轴数据
          data: this.$store.getters.xAxis,
          // 坐标轴刻度相关设置
          axisTick: {
            // 刻度线和标签对齐
            alignWithLabel: true
          },
          // 坐标轴两边留白策略
          boundaryGap: false
        },
        // 直角坐标系 grid 中的 y 轴
        yAxis: {
          // 数值轴
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            // y 轴数据
            data: this.$store.getters.series,
            // 折线/面积图
            type: 'line',
            // 圆滑曲线
            smooth: true,
            // 渐变颜色
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fec8c8'
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ])
            },
            // 分隔线样式
            lineStyle: {
              // 分隔线颜色
              color: '#ff5757'
            },
            // 折线拐点标志的样式。
            itemStyle: {
              // 折线拐点标志的颜色
              color: '#ff5757'
            }
          }
        ],
        // 直角坐标系内绘图网格
        grid: {
          // grid 组件离容器右侧的距离
          right: '4%',
          // grid 组件离容器下侧的距离
          bottom: '3%',
          // grid 区域是否包含坐标轴的刻度标签
          containLabel: true
        }
      }
      option && myChart.setOption(option)
    },
    // eslint-disable-next-line vue/return-in-computed-property
    getRight() {
      const chartDom = document.getElementById('right')
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          // 标题
          text: '销售额趋势图',
          // 居中
          left: 'center',
          // 字体
          textStyle: {
            fontSize: 14
          }
        },
        // 提示框组件
        tooltip: {
          // 坐标轴触发
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            // 线条样式
            lineStyle: {
              // 颜色
              color: '#d9d9d9',
              // 宽度
              width: '2',
              // 实线
              type: 'solid'
            }
          },
          // 自定义提示文本
          formatter: function(data) {
            return '销售额：' + data[0].value + '<br/>' + data[0].name
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }

      option && myChart.setOption(option)
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    this.amountCollect()
    this.amountCollecte()
  },
  methods: {
    amountCollect() {
      if (this.item === 1) {
        this.$store.commit('user/setSaleData', {
          series: [463518, 194674, 75521, 261353, 410750, 344390, 0],
          xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        })
        this.getLeft
      } else if (this.item === 2) {
        dayjs(this.chooseMonth).startOf('month').format('MM-DD')
        dayjs(this.chooseMonth).endOf('month').format('MM-DD')
        this.getLeft
      } else {
        dayjs(this.chooseMonth).startOf('month').format('YYYY-MM-DD')
        dayjs(this.chooseMonth).endOf('month').format('YYYY-MM-DD')
        this.getLeft
      }
    },
    amountCollecte() {
      this.getRight
    },
    async weekFn() {
      this.item = 1
      await this.$store.dispatch('user/getSaleDataAction', {
        num: 1,
        start: this.$store.getters.start.substring(0, 8) + '24',
        end: this.$store.getters.end.substring(0, 10)
      })
      this.amountCollect()
    },
    async monthFn() {
      this.item = 2
      await this.$store.dispatch('user/getSaleDataAction', {
        num: 1,
        start: this.$store.getters.start.substring(0, 10),
        end: this.$store.getters.end.substring(0, 10)
      })
      this.amountCollect()
    },
    async yearFn() {
      this.item = 3
      await this.$store.dispatch('user/getSaleDataAction', {
        num: 2,
        start: this.$store.getters.start.substring(0, 5) + '01' + '-' + '01',
        end: this.$store.getters.end.substring(0, 10)
      })
      this.amountCollect()
    }
  }
}
</script>

<style scoped lang="less">
.tick {
  display: flex;
}
.box {
    margin-top: 20px;
    margin-right: 20px;
    width: 684px;
    height: 166px;
    padding: 20px;
    background-color: #e9f3ff;
    border-radius: 20px;
  }
  .box1 {
  margin-top: 20px;
    width: 575px;
    height: 166px;
    padding: 20px;
    background-color: #e9f3ff;
    border-radius: 20px;
  }
.title {
  -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #333;
    span {
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #999;
    }
}
.list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.echarts {
  min-height: 352px;
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    .text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time {
        width: 129px;
        cursor: pointer;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        height: 34px;
        background: rgba(233,243,255,.37);
        border-radius: 10px;
      }
      .is-checked {
        background: #fff;
        width: 37px;
        height: 25px;
        font-size: 14px;
        text-align: center;
        line-height: 25px;
        border-radius: 7px;
        font-weight: 600;
        color: #333;
      }
    }
    #left {
      height: 278px;
    }
    #right {
      height: 278px;
    }
}
</style>
